import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import MyScroll from '../../components/MyScroll/MyScroll';
import { Icon, Button, Flex, List, Modal, DatePicker, Picker, ActionSheet, Toast, WingBlank, Checkbox } from 'antd-mobile';
import {footPrint, w100, last_child_style, foot_print_content, foot_print_content_all, checkboxDiv, MyList, delDiv } from "./footPrint.less";
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import Img from "../../components/Img/Img";
import Datetime from 'react-datetime';
import moment from 'moment';
import DateSelect from './DateSelect';
import MyListView from '../../components/MyListView/MyListView';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
const CheckboxItem = Checkbox.CheckboxItem;

class FootPrint extends Component {
    constructor(props) {
        super(props);
        this.AlloyTouch = null;

        var now = new Date();
        var year = now.getUTCFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();
        this.state = {
            date: now,
            selectDate: [],
            selectedDate: `${ year }-${ month <= 9 ? `0${month}` : month }-${ day <= 9 ? `0${day}` : day }`,
            showAll: false,
            checkbox: false,
            // 要删除的数据
            delList: [],

            // 保存删除的数据
            delecteList: [],
            delListAll: false,
        };
        this.curTime = "";

    }


    loadMore = () => this.props.dispatch({ type: 'footPrint/browsesListEFF', obj:{ pageNo: this.props.footPrint.browsesList.pageNo + 1 } })
    getAlloyTouch = AT => this.AlloyTouch = AT
    refresh = () => this.props.dispatch({ type: 'footPrint/browsesListEFF', obj:{ pageNo:1 }})


    componentDidMount(){
        this.props.dispatch({type:"footPrint/browsesListEFF"});
    }

    nToS = n => n > 9 ? n : `0${n}`

    rightClick = list => this.setState({selectDate: [...list].reverse()})

    setTime = date => {
        var data = `${date.getFullYear()}-${ this.nToS(date.getMonth() + 1) }-${ this.nToS(date.getDate()) }`;
        // 筛选向服务器请求！
        // this.props.dispatch({type: "footPrint/queryDateEFF", obj: {data, pageNo: 1}})
        this.setState({date, selectDate: [ data ], selectedDate: data});
    }

    setDateSelect = data => {
        console.log(data, "进入setDateSelect。。。");
        const date = new Date(data);
        // 提交到redux中
        this.props.dispatch({type: 'footPrint/dateSave', data});
        this.setState({date, selectDate: [ data ], selectedDate: data});
        this.refresh();
    }

    setShow = is => this.setState({showAll: is})

    checkClick = id => {
        if (this.state.delList.includes(id)) this.setState({delList: this.state.delList.filter(v => v != id)});
        else this.setState({delList: [...this.state.delList, id]});
    }

    edit = () => this.setState({checkbox: !this.state.checkbox})

    delClick = () => {
        this.props.dispatch({type: 'footPrint/delEFF', obj: {id: this.state.delList.join(',')}}).then(res => {
            console.log('删除返回的数据。。。');
            if (res.code == 200) {
                this.state.delecteList.push(...this.state.delList);
                this.setState({delecteList: [...this.state.delecteList, ...this.state.delList]});
                Toast.success(res.msg, 1);
            }
            this.setState({delList: []})
        })
    }

    imgTo = specId => {
        console.log(specId, "specId");
        return this.state.checkbox || this.props.dispatch(routerRedux.push({pathname: `/goodsDetail/${specId}`}))
    }

    render() {
        // console.log(this.props.footPrint);
        const {browsesList = [], curDateList, selectDate} = this.props.footPrint
        const {dataList = [], list = []} = browsesList;
        // console.log(dataList, "dataList");
        var selectList = [];

        console.log(this.props.footPrint, "list");
        console.log([...curDateList], 'curDateList');
        return (
            <div className={footPrint}>

                    <NavTopBar
                       title="足迹"
                       dispatch={this.props.dispatch}
                       // rightContent={<span onClick={()=>{}}>删除</span>}
                       // 删除功能暂时没有。在此先做出查看全部。。。
                       rightContent={<span onClick={ this.edit }>{ this.state.checkbox ? '完成' : '编辑' }</span>}
                       // rightContent={this.state.selectDate[0] ? <span onClick={() => this.rightClick(dataList)}>全部</span> : ""}
                   />

               <DateSelect
                   curYear={ selectDate.slice(0, 4) || this.state.selectedDate.slice(0, 4)}
                   curMonth={ +(selectDate.slice(5, 7) || this.state.selectedDate.slice(5, 7)) - 1 }
                   curDay={ selectDate.slice(-2) || this.state.selectedDate.slice(-2)}

                   showAll={true}
                   selectList={ dataList }
                   setDay={ this.setDateSelect }
                   showAll={ this.state.showAll }
                   setShow={ this.setShow }
               />
                   {/* <DatePicker
                     mode="date"
                     className={ w100 }
                     title=" Date"
                     extra="Optional"
                     format="YYYY-MM-DD"
                     value={this.state.date}
                     onChange={ this.setTime }
                   >
                       <List.Item style={{width: "100%"}} arrow="horizontal">日期</List.Item>
                   </DatePicker> */}

                   {/* 响应式做的不好。无法兼容宽屏。最好用伸缩盒子。或者使用嵌套div 来控制三个盒子各个居中。。。 */}
                   {/* 在此地方判断的是，是否有日期选择。。。 */}
                   <div className={ this.state.showAll ? foot_print_content : foot_print_content_all}>
                       {/* <MyScroll className={ last_child_style } style={{height: '100%'}}>
                           {
                               (this.state.selectDate[0] ? this.state.selectDate : dataList || []).reverse().map((item,i)=>{
                                   return (
                                       <div key={i} style={{width: "100%", backgroundColor: "#fff", marginTop: `${i != 0 ? ".3" : "0"}rem`}}>
                                           <div style={{fontSize:".3rem",padding:".2rem .3rem", backgroundColor: "#f5f5f5"}}>{item}</div>
                                           <WingBlank style={{padding: '.3rem 0'}}>

                                               {list.map((value,ii)=>{

                                                   if(value.time == item){
                                                       return <div key={ii} onClick={() => this.imgTo(value.specId )} style={{position:"relative",border:"1px solid #666",marginBottom:".2rem",marginRight:".2rem",display:"inline-block"}}>
                                                           <Img src={value.goodsImage} style={{width:"2rem",height:"2rem"}}  alt=""/>

                                                               {value.stockStatus=="-1"?<p className="kucun1">库存紧张</p>:value.stockStatus=="1"?<p className="price" >¥{value.goodsPrice}</p>:value.stockStatus=="0"?
                                                                   <img src="../../assets/img/noStore.png" className="kucun2" alt=""/>:"" }

                                                               {
                                                                   this.state.checkbox && <CheckboxItem className={ checkboxDiv } checked={ this.state.delList.includes(value.id) } onChange={() => this.checkClick(value.id)} />
                                                               }
                                                           </div>
                                                   }
                                               })}
                                           </WingBlank>
                                       </div>
                                   )
                               })
                           }
                       </MyScroll> */}


                       <MyListView
                           // key={ layoutType == true ? 1 : 0 }
                           className={ MyList }
                           getAlloyTouch={ this.getAlloyTouch }
                           refresh={ this.refresh }
                           loadMore={ this.loadMore }
                           hasMore={ this.props.footPrint.browsesList.pageNo * this.props.footPrint.browsesList.pageSize < this.props.footPrint.browsesList.totalRows }
                           renderItem={(item, i) => {
                               // console.warn(item, "遍历的数据。。。");

                               return (
                                   <div key={i} style={{width: "100%", backgroundColor: "#fff", marginTop: `${i != 0 ? ".3" : "0"}rem`}}>
                                       <div style={{fontSize:".3rem",padding:".2rem .3rem", backgroundColor: "#f5f5f5"}}>{item}</div>
                                       <WingBlank style={{padding: '.3rem 0'}}>

                                           {list.map((value,ii)=>{
                                               if(value.time == item && !this.state.delecteList.includes(value.id)){
                                                   return <div key={ii} onClick={() => this.imgTo(value.specId )} style={{position:"relative",border:"1px solid #666",marginBottom:".2rem",marginRight:".2rem",display:"inline-block"}}>
                                                       <NoLazyImg src={value.goodsImage} style={{width:"2rem",height:"2rem"}}  alt=""/>

                                                           {value.stockStatus=="-1"?<p className="kucun1">库存紧张</p>:value.stockStatus=="1"?<p className="price" >¥{value.goodsPrice}</p>:value.stockStatus=="0"?
                                                               <img src="../../assets/img/noStore.png" className="kucun2" alt=""/>:"" }

                                                           {
                                                               this.state.checkbox && <CheckboxItem className={ checkboxDiv } checked={ this.state.delList.includes(value.id) } onChange={() => this.checkClick(value.id)} />
                                                           }
                                                       </div>
                                               }
                                           })}
                                       </WingBlank>
                                   </div>
                               )

                           }}
                           data={ [...curDateList] }>
                       </MyListView>

                       {
                           this.state.checkbox &&
                           <div className={ delDiv }>
                               <div style={{marginTop: '.35rem'}} onClick={() => {
                                       if (this.state.delListAll) this.setState({delListAll: false, delList: []});
                                       else this.setState({delListAll: true, delList: [...(list.map(value => value.id))]});
                                   }}>
                                   <CheckboxItem style={{width: '.6rem', float: 'left', display: 'inline-block', transform: 'translateY(-.04rem)', paddingLeft: '.3rem'}} checked={ this.state.delListAll }/>
                                   全选
                               </div>

                               <div style={{marginTop: '.1rem', height: '.8rem', lineHeight: '.8rem', backgroundColor: '#ff0036', color: '#fff', width: '1.5rem', borderRadius: '.08rem', textAlign: 'center'}} onClick={this.delClick}>删除</div>
                           </div>
                       }



                   </div>
            </div>
            // <Flex style={{}} direction="column" className={footPrint} >
            //     <NavTopBar
            //         title="足迹"
            //         dispatch={this.props.dispatch}
            //         rightContent={<span onClick={()=>{}}>删除</span>}
            //     />
            //
                // {/* <DatePicker
                //   mode="date"
                //   className={ w100 }
                //   title=" Date"
                //   extra="Optional"
                //   format="YYYY-MM-DD"
                //   value={this.state.date}
                //   onChange={ this.setTime }
                // >
                //     <List.Item style={{width: "100%"}} arrow="horizontal">日期</List.Item>
                // </DatePicker> */}
            //
            //
            //     {/* <Datetime locale="zh-ch" /> */}
            //
            //
                // {
                //     (dataList || [this.formatDate]).reverse().map((item,i)=>{
                //         return (
                //             <div key={i} style={{width:"100%",backgroundColor:"#fff",marginTop:".3rem"}}>
                //                 <WingBlank>
                //                     <div style={{fontSize:".3rem",padding:".2rem 0"}}>{item}</div>
                //
                //                     {list.map((value,ii)=>{
                //                         if(value.time==item){
                //                             return <div key={ii} style={{position:"relative",border:"1px solid #666",marginBottom:".2rem",marginRight:".2rem",display:"inline-block"}}>
                //                                 <Img src={value.goodsImage} style={{width:"2rem",height:"2rem"}}  alt=""/>
                //
                //                                     {value.stockStatus=="-1"?<p className="kucun1">库存紧张</p>:value.stockStatus=="1"?<p className="price" >¥{value.goodsPrice}</p>:value.stockStatus=="0"?
                //                                         <img src="../../assets/img/noStore.png" className="kucun2" alt=""/>:"" }
                //                                 </div>
                //                         }
                //                     })}
                //                 </WingBlank>
                //             </div>
                //         )
                //     })
                // }
            // </Flex>

        );
    }
}


export default connect(({ footPrint }) => ({ footPrint }))(FootPrint);
